import { defineConfig, loadEnv, ConfigEnv, UserConfig } from 'vite'
import { wrapperEnv } from './build/getEnv'
import { createProxy } from './build/proxy'
import { createVitePlugins } from './build/plugins'

import path from 'path' // 注意：在 ts 模块中加载 node 核心模块需要安装 node 的类型补充模块：npm i -D @types/node

import pkg from './package.json'

// 引入dayjs
import dayjs from 'dayjs'
// 导入样式

const { dependencies, devDependencies, name, version } = pkg
const __APP_INFO__ = {
  pkg: { dependencies, devDependencies, name, version },
  lastBuildTime: dayjs().format('YYYY-MM-DD HH:mm:ss'),
}

// https://vitejs.dev/config/
export default defineConfig(({ mode }: ConfigEnv): UserConfig => {
  const root = process.cwd()
  const env = loadEnv(mode, root)
  console.log('env ->', env)
  const viteEnv = wrapperEnv(env)

  return {
    base: viteEnv.VITE_PUBLIC_PATH,
    root: root,
    resolve: {
      alias: {
        // 配置模块路径自定义别名
        '@': path.resolve(__dirname, './src'),
        'styles': path.resolve(__dirname, './src/styles'),
        'vue-i18n': 'vue-i18n/dist/vue-i18n.cjs.js',
      },
    },
    define: {
      '__APP_INFO__': JSON.stringify(__APP_INFO__),
      'process.env': process.env,
    },
    css: {
      preprocessorOptions: {
        // 自动引入全局css变量
        // 指定传递给css预处理器的选项,
        scss: {
          api: 'modern-compiler',
          additionalData: '@use "styles/element/index.scss" as *;', // 使用 scss.additionalData 来编译所有应用 scss 变量的组件。
        },
      },
    },
    plugins: createVitePlugins(viteEnv),
    esbuild: {
      pure: viteEnv.VITE_DROP_CONSOLE ? ['console.log', 'debugger'] : [],
    },
    build: {
      outDir: 'dist',
      minify: 'esbuild',
      // esbuild 打包更快，但是不能去除 console.log，terser打包慢，但能去除 console.log
      // minify: "terser",
      // terserOptions: {
      // 	compress: {
      // 		drop_console: viteEnv.VITE_DROP_CONSOLE,
      // 		drop_debugger: true
      // 	}
      // },
      sourcemap: false,
      // 禁用 gzip 压缩大小报告，可略微减少打包时间
      reportCompressedSize: false,
      // 规定触发警告的 chunk 大小
      chunkSizeWarningLimit: 2000,
      rollupOptions: {
        output: {
          // Static resource classification and packaging
          chunkFileNames: 'assets/js/[name]-[hash].js',
          entryFileNames: 'assets/js/[name]-[hash].js',
          assetFileNames: 'assets/[ext]/[name]-[hash].[ext]',
        },
      },
    },
    server: {
      host: '0.0.0.0',
      port: viteEnv.VITE_PORT,
      open: viteEnv.VITE_OPEN,
      cors: true,
      proxy: {
        '/upload': {
          target: 'http://localhost:3001', // 代理的目标地址
          changeOrigin: true, // Origin 指示了请求来自于哪个站点，用于 CORS 请求或者 POST 请求
          rewrite: (path) => path.replace(/~\/upload/, ''),
        },
        '/merge': {
          target: 'http://localhost:3001', // 代理的目标地址
          changeOrigin: true, // Origin 指示了请求来自于哪个站点，用于 CORS 请求或者 POST 请求
          rewrite: (path) => path.replace(/~\/merge/, ''),
        },
        '/api': {
          target: 'https://shop.fed.lagou.com/api', // 代理的目标地址
          changeOrigin: true, // Origin 指示了请求来自于哪个站点，用于 CORS 请求或者 POST 请求
          rewrite: (path) => path.replace(/~\/api/, ''),
        },
      },
    },
  }
})

// export default defineConfig({
//   define: {
//     'process.env': process.env,
//   },
//   plugins: [
//     vue(),
//     // svg-icon
//     createSvgIconsPlugin({
//       // 指定需要缓存的图标文件夹
//       iconDirs: [path.resolve(process.cwd(), 'src/assets/svg')], // 指定symbolId格式
//       symbolId: 'icon-[dir]-[name]',
//     }),
//     viteMockServe({
//       mockPath: './mock/', // mock文件位置
//       enable: process.env.NODE_ENV === 'development', // 是否开启mock
//       watchFiles: true,
//       ignore: /(\.test\.js$)|(spec\.tsx$)/, // 忽略mock文件
//     }),
//     eslintPlugin({
//       // 配置选项
//       cache: false, // 禁用eslint缓存
//     }),
//     vueJsx({
//       // 配置选项
//     }),
//     AutoImport({
//       // Auto import functions from Vue, e.g. ref, reactive, toRef...
//       // 自动导入 Vue 相关函数，如：ref, reactive, toRef 等
//       // 自定义的配置规则，见 https://github.com/antfu/unplugin-auto-import#configuration
//       // vue-i18n : 多语言
//       // @vueuse/head : 管理文档头中<title>的<meta>和其他元素
//       // @vueuse/core : Composition API 的实用函数集合
//       imports: ['vue', 'vue-router', 'pinia', 'vue-i18n'],
//       eslintrc: {
//         // 默认false, true启用。生成一次就可以，避免每次工程启动都生成，一旦生成配置文件之后，最好把enable关掉，即改成false。否则这个文件每次会在重新加载的时候重新生成，这会导致eslint有时会找不到这个文件。当需要更新配置文件的时候，再重新打开
//         enabled: true, // Default `false`
//         globalsPropValue: true,
//         filepath: './.eslintrc-auto-import.js',
//       },
//       include: [/\.[tj]sx?$/, /\.vue$/, /\.vue\?vue/],
//       // Auto import functions from Element Plus, e.g. ElMessage, ElMessageBox... (with style)
//       // 自动导入 Element Plus 相关函数，如：ElMessage, ElMessageBox... (带样式)
//       resolvers: [
//         ElementPlusResolver(),
//         // Auto import icon components
//         // 自动导入图标组件
//         IconsResolver({
//           prefix: 'icon',
//         }),
//       ],
//       // auto-imports.d.ts 其实本质就是利用全局 declare 来将例如 vue的 api 声明为全局的变量
//       dts: path.resolve(
//         path.resolve(__dirname, 'src'),
//         'typings',
//         'auto-imports.d.ts',
//       ),
//     }),
//     Components({
//       // 按需导入element-plus组件
//       // 指定组件位置，默认是src/components
//       // 目录结构
//       // |-- components
//       // |-- Heloow
//       //  |-- index.vue
//       include: [/\.[tj]sx?$/, /\.vue$/, /\.vue\?vue/],
//       dirs: ['src/components', 'src/**/components'],
//       extensions: ['vue', 'jsx', 'tsx', 'ts', 'js'],
//       resolvers: [
//         // Auto register icon components
//         // 自动注册图标组件
//         IconsResolver({
//           prefix: 'icon', // 自动引入的Icon组件统一前缀，默认为 i，设置false为不需要前缀
//           // {prefix}-{collection}-{icon} 使用组件解析器时，您必须遵循名称转换才能正确推断图标。
//           // alias: { park: 'icon-park' } 集合的别名
//           enabledCollections: ['ep'], // 这是可选的，默认启用 Iconify 支持的所有集合['mdi']
//         }),

//         // Auto register Element Plus components
//         // 解析的 UI 组件库,自动导入 Element Plus 组件
//         ElementPlusResolver(),
//       ],
//       // components.d.ts 其实本质就是利用 GlobalComponents, 来将组件注册到全局组件里面, 这样就可以自动推断组件类型了
//       dts: path.resolve(
//         path.resolve(__dirname, 'src'),
//         'typings',
//         'components.d.ts',
//       ),
//     }),
//     ElementPlus({
//       // 使用 unplugin-element-plus 编译所有应用 scss 变量的组件
//       useSource: true,
//     }),
//     createStyleImportPlugin({
//       resolves: [ElementPlusResolve()],
//     }),
//     Icons({
//       // scale: 1, // 缩放
//       compiler: 'vue3', // 编译方式
//       // defaultClass: '', // 默认类名
//       // defaultStyle: '', // 默认样式
//       autoInstall: true,
//       // jsx: 'react' // jsx支持
//     }),
//     Inspect(), // 插件调试
//   ],

//   // 只有VITE_KEY会被暴露为 import.meta.env.VITE_KEY提供给客户端源码
//   // 当然也可以自定义env变量的前缀，使用envPrefix配置项
//   envPrefix: ['VITE_', 'DZ_'],
//   resolve: {
//     alias: {
//       // 配置模块路径自定义别名
//       '@': path.resolve(__dirname, 'src'),
//       'styles': path.resolve(__dirname, 'src/styles'),
//     },
//   },
//   css: {
//     preprocessorOptions: {
//       // 自动引入全局css变量
//       // 指定传递给css预处理器的选项,
//       scss: {
//         api: 'modern-compiler',
//         additionalData: '@use "styles/element/index.scss" as *;', // 使用 scss.additionalData 来编译所有应用 scss 变量的组件。
//       },
//     },
//   },
//   server: {
//     proxy: {
//       '/upload': {
//         target: 'http://localhost:3001', // 代理的目标地址
//         changeOrigin: true, // Origin 指示了请求来自于哪个站点，用于 CORS 请求或者 POST 请求
//         rewrite: (path) => path.replace(/~\/upload/, ''),
//       },
//       '/merge': {
//         target: 'http://localhost:3001', // 代理的目标地址
//         changeOrigin: true, // Origin 指示了请求来自于哪个站点，用于 CORS 请求或者 POST 请求
//         rewrite: (path) => path.replace(/~\/merge/, ''),
//       },
//       '/api': {
//         target: 'https://shop.fed.lagou.com/api', // 代理的目标地址
//         changeOrigin: true, // Origin 指示了请求来自于哪个站点，用于 CORS 请求或者 POST 请求
//         rewrite: (path) => path.replace(/~\/api/, ''),
//       },
//     },
//   },
//   build: {
//     minify: 'terser', // 必须开启：使用terserOptions才有效果
//     terserOptions: {
//       compress: {
//         // 生产环境时移除console
//         drop_console: true,
//         drop_debugger: true,
//       },
//     },
//     // 自动分割包名输出 chunkSizeWarningLimit 配置大小
//     rollupOptions: {
//       output: {
//         manualChunks(id) {
//           // https://www.jianshu.com/p/ae05af8d6f33
//           // 将pinia的全局库实例打包进vendor，避免和页面一起打包造成资源重复引入
//           if (id.includes(path.resolve(__dirname, '/src/store/index.ts'))) {
//             return 'vendor'
//           }
//         },
//       },
//     },
//   },
// })
